import { init } from "snabbdom/build/package/init";
import { h } from "snabbdom/build/package/h";
// 导入模块
import { styleModule  } from "snabbdom/build/package/modules/style";
import { eventListenersModule } from "snabbdom/build/package/modules/eventlisteners";
import { attributesModule } from "snabbdom/build/package/modules/attributes";
import { propsModule } from "snabbdom/build/package/modules/props";
import { classModule } from 'snabbdom/build/package/modules/class'
import { datasetModule } from 'snabbdom/build/package/modules/dataset'

// 注册模块
const patch = init([
    styleModule, 
    eventListenersModule,
    attributesModule,
    propsModule,
    classModule,
    datasetModule
]);

// 使用h() 函数的第二个参数传入模块需要的数据(对象)

let vNode = h('div', {
    attrs: {
        name: '123'
    },
    props: {
        age: '18'
    },
    style: {
        backgroundColor: 'yellow'
    },
    on: {
        click: eventHandler
    },
    class: {
        slc: true
    },
    dataset: {
        sex: 'none'
    }
}, [
    h('h1', 'Hello Snabbdom'),
    h('p', '这是P标签'),
])


function eventHandler() {
    console.log('我被点了');
}
// 获取页面占位元素
let app = document.querySelector('#app')

// 渲染VNode
patch(app, vNode)